<template>
  <div class="performance-card">
    <!-- 头部 -->
    <div class="header mb-20">
      <div class="title">
        业务员业绩排名
        <!-- 时间切换 -->
        <div class="tabs ml-20">
          <el-button-group>
            <el-button
              v-for="(t, i) in tabs"
              :key="i"
              :type="activeTab === t ? 'primary' : 'default'"
              size="small"
              @click="activeTab = t"
            >
              {{ t }}
            </el-button>
          </el-button-group>
        </div>
      </div>
      <div class="date-info">
        日期: {{ currentDate }} 总额:
        <span class="amount">{{ totalAmount.toLocaleString() }}</span>
      </div>
    </div>

    <!-- 日期横向滚动 -->
    <div class="date-scroll">
      <el-button link :icon="ArrowLeft" @click="scroll(-1)" />
      <div class="date-list">
        <div
          v-for="(d, i) in dateList"
          :key="i"
          class="date-item"
          :class="{ active: d === currentDate }"
          @click="currentDate = d"
        >
          {{ d }}
        </div>
      </div>
      <el-button link :icon="ArrowRight" @click="scroll(1)" />
    </div>

    <!-- 表格 -->
    <!-- 使用原生 table 替代 el-table -->
    <div class="custom-table-container" style="margin-top: 10px">
      <table class="custom-table">
        <thead>
          <tr>
            <!-- 用class 代替 行内样式 -->
            <th class="custom-table-header">统计ID</th>
            <th class="custom-table-header">业务员</th>
            <th class="custom-table-header">金额</th>
            <th class="custom-table-header">有效订单</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.salesman }}</td>
            <td>{{ item.orders }}</td>
            <td>{{ item.amount }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';

const tabs = ['每天', '每周', '每月'];
const activeTab = ref('每天');
const currentDate = ref('2025-10-02');
const totalAmount = ref(25000);

const dateList = ref([
  '2025-10-01',
  '2025-10-02',
  '2025-10-03',
  '2025-10-04',
  '2025-10-05',
  '2025-10-06',
  '2025-10-07'
]);

const tableData = ref([
  { id: 'ID43321432', salesman: '张三', orders: 263, amount: '50,000.00' },
  { id: 'ID43321432', salesman: '张三', orders: 263, amount: '50,000.00' },
  { id: 'ID43321432', salesman: '张三', orders: 263, amount: '50,000.00' },
  { id: 'ID43321432', salesman: '张三', orders: 263, amount: '50,000.00' }
]);

// 日期滚动模拟
const scroll = (dir: number) => {
  if (dir < 0) {
    dateList.value.unshift('2025-09-30');
  } else {
    dateList.value.push('2025-10-08');
  }
};
</script>

<style lang="scss" scoped>
@use '../../common/salesPerformanceRanking.scss';
</style>
